<template>
  <div class="daily">
    <div class="oh up-top">
      <div class="up-avatar oh fl">
        <img :src="item.avatar" width="100%" height="100%">
      </div>
      <div class="up-name fl">
        {{item.publisherName}}
      </div>
      <div class="up-time fr">
        {{item.createTime}}
      </div>
    </div>
    <div class="up-cont tl padding-15" v-html="item.content"></div>
    <div class="up-img tl oh flex padding-15" :class="'up-img-' + item.trendsFiles.length">
      <div v-for="img in item.trendsFiles" class="oh fl" @click="checkPic(img.url)"
           :style="'background:url(' + img.url + ')no-repeat top center/cover'"></div>
    </div>
    <div class="up-like oh padding-15" v-if="item.praises.length>0">
      <div class="fl">
        <img style="vertical-align: top;" src="../../../static/img/like_2.png" height="18px">
      </div>
      <div class="fr tl up-like-p">
        {{item.praises.map(praise=>praise.praiseName).join(",")}}
      </div>
    </div>
  </div>
</template>

<script>
	import wx from "weixin-js-sdk";
  export default {
    name: "ShareTrends",
    data() {
      return {
        id: '',
        item: {}
      }
    },
    methods: {
			checkPic(url) {
				wx.previewImage({
					previewImage: url,
					urls: [url]
				})
			},
      getShareTrends() {
        this.$http.fetchShareTrendsById({id: this.id}).then(resp => {
          this.item = resp.data;
        })
      }

    },
    mounted() {
      this.id = this.$route.query.id;
      this.getShareTrends();
    }
  }
</script>

<style scoped>
  .home_block {
    color: #0D0D0D;
    width: 100%;
    background: #FFFFFF;
    padding: 1.5rem 1rem;
    margin-bottom: 1.5rem;
    box-sizing: border-box;
  }

  .kinsfolk-apply {
    height: 11rem;
  }

  .login_name {
    width: 100%;
    height: 4rem;
    font-size: 1.8rem;
  }

  .login_avater {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: #E5E5E5;
    margin-right: 1rem;
  }

  .new-apply {
    width: 90%;
    margin: auto;
    height: 4rem;
    padding: 1.2rem;
    box-sizing: border-box;
    color: #000000;
    font-size: 1.4rem;
    justify-content: left;
  }

  .new-apply img {
    width: auto;
    height: 2.8rem;
  }

  .new-icon {
    width: 2.8rem;
    height: 100%;
    margin-right: 1.5rem;
  }

  .new-badge {
    right: -1rem;
    top: -0.5rem;
  }

  .apply-text {
    width: calc(100% - 4.3rem);
    height: 100%;
    line-height: 2.8rem;
    color: rgba(16, 16, 16, 1);
  }

  .home_title {
    font-size: 1.6rem;
    border-left: 4px solid #36C12D;
    border-radius: 10px;
    width: 0;
    white-space: nowrap;
    text-indent: 1rem;
    line-height: 1.6rem;
    height: 1.6rem;
    margin-bottom: 1.5rem;
  }

  .home_menu {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    margin: 0 auto 0.5rem;
    font-size: 1.4rem
  }

  .home_menu img {
    width: 2rem;
    height: 2rem;
    margin-top: 1rem;
  }

  .situation-box {
    width: 100%;
    padding: 0 1rem;
    box-sizing: border-box;
  }

  .situation-titl {
    font-size: 1.8rem;
    width: 100%;
    padding: 0.5rem 0;
    background: #F7F7F7;
  }

  .situation-item {
    position: relative;
    border: 1px solid #2aa7e1;
    box-sizing: border-box;
    width: 100%;
    margin: 1.5rem 0;
    padding: 3rem 1rem 1rem 1rem;
  }

  .situation-item-notitl {
    padding: 1rem;
  }

  .situation-item span,
  .situation-item li {
    color: #2c3e50;
  }

  .situation-item-titl {
    position: absolute;
    top: -1.2rem;
    background: #2aa7e1;
    color: #fff;
    padding: 0 1rem;
  }

  .situation-item li {
    padding: 1rem;
    list-style: square;
    box-sizing: border-box;
  }

  .no-style {
    list-style: none !important;
  }

  .home-badge {
    margin-right: 1rem;
    display: none;
  }

  .no-style .home-badge {
    display: inline-block;
  }

  .msg-titl {
    line-height: 3.2rem;
  }

  .leave-name {
    width: 100%;
    margin: auto;
    flex-wrap: wrap;
  }

  .leave-name span {
    width: 25%;
    text-align: center;
    padding: 0.5rem 0;
  }

  .count-table td {
    padding: 0.5rem 0;
    font-size: 1.4rem;
  }

  .count-table tr {
    border-bottom: 1px solid #D9D9D9;
  }

  .index_title {
    font-size: 1.6rem;
  }

  .index_title img {
    margin-right: 1rem;
    width: 3rem;
    height: 3rem;
  }

  .num_item {
    margin-top: 1rem;
    flex-wrap: wrap;
  }

  .num_item_1 {
    margin: 0.5rem 0;
    width: 50%;
    font-size: 1.2rem;
  }

  .num_item_2 {
    margin: 0.5rem 0;
    width: 100%;
    font-size: 1.2rem;
    line-height: 2.2rem;
  }

  .num_p {
    padding-right: 2rem;
    line-height: 2.2rem;
  }

  .num_n {
    width: calc(100% - 2rem);
  }

  .icon_point {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    margin-right: 1rem;
    margin-top: 0.5rem;
  }

  .date_select {
    font-size: 1.4rem;
    margin: 1rem 0;
    justify-content: center;
  }

  .date_select img {
    height: 1.4rem;
    margin: 0 2rem;
  }

  .mychart {
    width: 100%;
    height: 250px;
  }

  .stu_td_1 {
    padding-bottom: 10px;
  }

  .stu_td_2 {
    border-top: 1px solid #ECECEC;
    padding-top: 10px;
  }

  .menu-handle {
    right: 1.5rem;
    top: 1.5rem;
    font-size: 1.4rem;
    line-height: 1;
    height: 1.4rem;
    color: #36C12D
  }

  .p_total {
    width: 45%;
    height: 10rem;
    box-sizing: border-box;
    padding-right: 4.4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 1.4rem;
    margin-top: 1rem;
  }

  .p_number {
    height: 5rem;
    line-height: 5rem;
    font-size: 2rem;
  }

  .p_number span {
    font-size: 3.6rem;
    color: #36C12D;
  }

  .p_total_photo {
    padding-right: 1rem;
    height: 12rem;
    font-size: 1.6rem;
  }

  .p_photo {
    margin: 0 auto 1rem;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
    overflow: hidden;
    background: #E8E8E8;
  }

  .p_video,
  .p_shl_photo {
    width: 100%;
    color: rgba(117, 117, 117, 1);
    justify-content: left;
  }

  .p_video > div {
    width: 10.8rem;
    height: 12rem;
    margin-right: 1.5rem;
  }

  .p_video .p_video_cover,
  .p_shl_photo_item {
    width: 100%;
    height: 10rem;
    margin-bottom: 0.5rem;
    background: #E8E8E8;
  }

  .p_shl_photo_item {
    margin-right: 1.5rem;
    width: 10.8rem;
    border-radius: 6px;
  }

  .p_video > div:last-child,
  .p_shl_photo_item:last-child {
    margin-right: 0;
  }

  .p_video_cover::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../../../static/img/vplay.png) no-repeat center/3rem 3rem rgba(0, 0, 0, 0.4);
  }

  .p_title {
    height: 3rem;
    line-height: 3rem;
    font-size: 1.6rem;
    margin-bottom: 1rem;
  }

  .p_title > div {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    text-align: center;
    margin-right: 1rem;
  }

  .p_title img {
    height: 1.8rem;
    width: 1.8rem;
    margin: 0.6rem auto;
  }

  .p_items {
    margin-top: 1rem;
    width: 55%;
    min-height: 10rem;
    border-left: 1px solid #dddddd;
    box-sizing: border-box;
    padding-left: 4.4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .p_report {
    justify-content: space-between;
    align-items: flex-start;
    height: 12rem;
    font-size: 1.6rem;
  }

  .point_green,
  .point_red {
    position: relative;
    justify-content: space-between;
    line-height: 1.7rem;
    height: 1.7rem;
    font-size: 1.2rem;
    width: 100%;
  }

  .point_red {
    color: #FF6D3F;
  }

  .point_green::after,
  .point_red::after {
    content: '';
    position: absolute;
    left: -2rem;
    top: 0.25rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: #36C12D;
    color: #11ADFB;
  }

  .point_red::after {
    background: #FF6D3F;
  }

  .report {
    width: 100%;
    margin-top: 2rem;
  }

  .report .point_green {
    margin-left: 2rem;
  }

  .report > div {
    width: calc(50% - 4rem);
  }

  .shl-title {
    width: 11.8rem;
    height: 3rem;
    line-height: 3rem;
    border-radius: 25px;
    background-color: rgba(17, 173, 251, 1);
    border: 1px solid rgba(255, 255, 255, 0);
    color: #FFFFFF;
    font-size: 1.4rem;
    margin: 15px auto;
    font-weight: bold;
  }

  .weui-loadmore {
    width: 90%;
    margin-top: 5rem;
  }

  .daily {
    width: 100%;
    background: #FFFFFF;
    margin-bottom: 1.5rem;
  }

  .padding-15 {
    padding: 0 1.5rem;
    box-sizing: border-box;
  }

  .up-top {
    width: 100%;
    padding: 1.5rem 1.5rem 0 1.5rem;
    box-sizing: border-box;
  }

  .up-avatar,
  .up-name,
  .up-time {
    height: 4rem;
    line-height: 4rem;
  }

  .up-avatar {
    width: 4rem;
    border-radius: 50%;
    background: #e5e5e5;
    margin-right: 1rem;
  }

  .up-name {
    font-size: 1.6rem;
    color: rgba(0, 0, 0, 1);
  }

  .up-time {
    font-size: 1rem;
    color: rgba(98, 98, 98, 1);
  }

  .up-cont {
    margin: 1rem 0;
    font-size: 1.4rem;
    line-height: 2rem;
  }

  .up-img {
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .up-img::after {
    content: '';
    width: 31%;
  }

  .up-img div {
    background: #e5e5e5;
    box-sizing: border-box;
    height: 12rem;
    margin-bottom: 1rem;
  }

  .up-img-1 div,
  .up-img-2 div,
  .up-img-4 div {
    width: 49%;
  }

  .up-img-3 div,
  .up-img-5 div,
  .up-img-6 div,
  .up-img-7 div,
  .up-img-8 div,
  .up-img-9 div {
    width: 31%;
  }

  .up-handle {
    justify-content: flex-end;
  }

  .icon {
    vertical-align: middle;
  }

  .up-handle > div {
    margin-left: 2rem;
  }

  .up-like,
  .up-like > div {
    position: relative;
    margin-top: 1rem;
  }

  .up-like::before {
    content: "";
    position: absolute;
    left: -1.5rem;
    width: calc(100% + 3rem);
    height: 1px;
    background: rgba(238, 238, 238, 1);
  }

  .up-like-p {
    width: calc(100% - 2.5rem);
    min-height: 2.2rem;
    color: rgba(89, 89, 89, 1);
    font-size: 1.2rem;
    line-height: 1.8rem;
    margin-bottom: 1rem;
  }

</style>
